<template>
  <component v-if="!!element" :is="element.tag" v-bind="element.bind"
    :data-id="element.id" 
    :data-pid="element.parentId" >
    <template v-for="ele in children">
      <AtomElement v-if="!!ele" :element="ele" :elements="elements" :slot="ele.slot" v-bind="ele.bind"></AtomElement>
    </template>
  </component>
</template>

<script>
export default {
  name:'AtomElement',
  components: {},
  data() {
    return {
    };
  },
  props: {
    element:{
        default:()=>{
            return null
        }
    },
    elements:{
        default:()=>{
            return []
        }
    },
  },
  watch: {},
  computed: {
    children(){
      return this.elements.filter(item=>item.parentId===this.element.id);
    }
  },
  created() {},
  mounted() {
    // if(!!this.element?.ins){
    //   console.log('AtomElement')
    //   this.element.ins.listeners.mounted(this);
    // }
  },
  methods: {
    
  }
};
</script>
<style scoped>
</style>